<template>
  <div class="order-list">
    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input v-model="searchForm.email" placeholder="请输入用户邮箱" clearable></el-input>
        </el-form-item>
        <el-form-item>
       
          <el-select v-model="searchForm.status" placeholder="订单状态" clearable>
            <el-option label="待支付" :value="1"></el-option>
            <el-option label="已退款" :value="0"></el-option>
            <el-option label="已支付" :value="-1"></el-option>
            <el-option label="待退款" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i> 搜索
          </el-button>
          <el-button @click="resetSearch">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单表格 -->
    <el-card class="table-card">
      <el-table
        :data="paginatedData"
        border
        v-loading="loading"
      >
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column prop="fname" label="航线名称" width="180"></el-table-column>
        <el-table-column prop="email" label="用户邮箱"></el-table-column>
        <el-table-column prop="frent" label="票价" width="120">
          <template v-slot="{ row }">
            ¥{{ row.frent }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template v-slot="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template v-slot="{ row }">
    
            <el-button
              v-if="row.status === 2"
              type="warning"
              size="mini"
              @click="handleReturnCar(row)"
            >
              确认退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'OrderList',

  data() {
    return {
      loading: false,
      searchForm: {
        email: '',
        status: ''
      },
      tableData: [], // 所有数据
      pagination: {
        currentPage: 1,
        pageSize: 10
      }
    }
  },

  computed: {
    // 计算分页后的数据
    paginatedData() {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return this.filteredData.slice(start, end)
    },

    // 计算筛选后的数据
    filteredData() {
      let result = [...this.tableData]
      
      // 根据邮箱筛选
      if (this.searchForm.email) {
        const keyword = this.searchForm.email.toLowerCase()
        result = result.filter(item => 
          item.email.toLowerCase().includes(keyword)
        )
      }
      
      // 根据状态筛选
      if (this.searchForm.status !== '') {
        result = result.filter(item => 
          item.status === this.searchForm.status
        )
      }
      
      return result
    },

    // 计算总数据量
    totalData() {
      return this.filteredData.length
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    // 获取订单列表
    async fetchData() {
      this.loading = true
      try {
        const params = {
          currentPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          email: this.searchForm.email || '',
          status: this.searchForm.status || ''
        }
        
        const res = await request.get('/OrderServlet', { params })
        
        if (res.code === 0) {
          this.tableData = res.data
          this.pagination.total = res.total
        } else {
          this.$message.error(res.msg || '获取订单列表失败')
        }
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.$message.error('获取订单列表失败')
      }
      this.loading = false
    },

    // 获取状态类型
    getStatusType(status) {
      const types = {
        '1': 'warning',  // 待购票
        '0': 'primary',  // 已购票
        '-1': 'success',   // 已退款
        '2': 'warning'   // 已退款
      }
      return types[status] || 'info'
    },

    // 获取状态文本
    
    getStatusText(status) {
      const texts = {
        '1': '待支付',
        '0': '已退款',
        '-1':'已支付',
        '2': '待退款'
      }
      return texts[status] || '未知'
    },

    // 确认购票
    async handleTakeCar(row) {
      try {
        await this.$confirm('确认该用户已退款？', '提示', {
          type: 'warning'
        })
        
        const res = await request.get('/ReFlightServlet', {
          params: {
            oid: row.oid,
            fid: row.fid
          }
        })
        
        if (res.code === 0) {
          this.$message.success('确认退款成功')
          this.fetchData()
        } else {
          this.$message.error(res.msg || '确认退款失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('确认退款失败:', error)
          this.$message.error('确认退款失败')
        }
      }
    },

    // 确认退款
    async handleReturnCar(row) {
      try {
        await this.$confirm('确认该用户已退款？', '提示', {
          type: 'warning'
        })
        
        const res = await request.get('/ReFlightServlet', {
          params: {
            oid: row.oid,
            fid: row.fid
          }
        })
        
        if (res.code === 0) {
          this.$message.success('确认退款成功')
          this.fetchData()
        } else {
          this.$message.error(res.msg || '确认退款失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('确认退款失败:', error)
          this.$message.error('确认退款失败')
        }
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1 // 重置到第一页
      this.fetchData()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        email: '',
        status: ''
      }
      this.pagination.currentPage = 1 // 重置到第一页
      this.fetchData()
    },

    // 处理每页显示数量变化
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1 // 重置到第一页
      this.fetchData()
    },
    
    // 处理页码变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style lang="less" scoped>
.order-list {
  .search-card {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style> 